<template>
  <div style="position:relative;margin-bottom: 0.4274rem">
    <van-swipe @change="onChange" width="2.735rem" height="2.735rem">
      <van-swipe-item v-for="(item,index) in good.src" :key="index">
        <img style="width:100%" :src="item" />
      </van-swipe-item>
    </van-swipe>
    <!-- 详情 -->
    <img src="../../assets/img/fanhui.png" class="icon" @click="fanhui" />
    <van-icon class="share" name="thumb-circle-o" @click="openshare" dot />
    <!-- 分享 -->
    <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" />
    <div class="title">
      <div class="goodname">{{good.name}}</div>
      <div class="message">{{good.message}}</div>
      <div class="pricebox">
        <span class="price">￥{{good.price}}</span>
        <span class="befrom">产地：中国</span>
      </div>
      <div class="plaint">
        <van-icon name="warning-o" />
        <span>不支持七天无理由</span>
      </div>
    </div>
    <div style="height:0.062rem;background:#f4f4f4"></div>
    <div class="norms">
      <div class="sizebox">
        <span>规格</span>
        <p class="good_size">{{good.size}}</p>
      </div>
      <div class="numbox">
        <span>数量</span>
        <van-stepper v-model="value" />
      </div>
    </div>
    <div style="height:0.062rem;background:#f4f4f4"></div>
    <div class="datebox">
      <span class="span1">有货</span>
      <span class="span2">12：00后完成订单，预计{{date}}前发货</span>
    </div>
    <div style="height:0.062rem;background:#f4f4f4"></div>
    <div class="xqbox">
      <p>
        <a :href="'/home#/xqimg?'+good.good_id">查看图文详情</a>
      </p>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="wap-home-o" text="首页" @click="onClickhome" />
      <van-goods-action-icon
        icon="cart-o"
        :badge="cartnum!=0?cartnum:''"
        text="购物车"
        @click="onClickcart"
      />
      <!-- 添加购物车 -->
      <van-goods-action-button type="danger" text="加入购物车" @click="add" />
    </van-goods-action>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop="show = false">
        <div class="block">{{message}}</div>
      </div>
    </van-overlay>
    <!-- 分享 -->
  </div>
</template>

<script>
import { getUser, getToken } from "@/utils/auth";
import goodApi from "@/api/goodApi";
export default {
  data() {
    return {
      value: 1,
      good: {},
      current: 0,
      date: "",
      loginstatus: {},
      cartnum: 0,
      message: "",
      show: false,
      incart: false,
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" }
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" }
        ]
      ]
    };
  },

  components: {},

  methods: {
    fanhui() {
      this.$router.push("/list/goodlist");
    },
    //验证token
    async checktoken() {
      let token = getToken();
      let user = getUser();

      if (token && user) {
        try {
          //到时候修改接口方法
          let p = await goodApi.checktoken(token);
          if (p.data.flag) {
            this.loginstatus = { flag: true, code: 200 };
          } else {
            this.loginstatus = { flag: false, code: 301 };
          }
        } catch (error) {
          this.loginstatus = { flag: false, code: 302 };
        }
      } else {
        this.loginstatus = { flag: false, code: 301 };
      }
    },

    //获取购物车数量
    async checkcart() {
      let user = getUser();
      user = JSON.parse(user);
      try {
        let p = await goodApi.cheackcart(user.userphone);
        console.log(p);
        if (p.data.flag) {
          p.data.data.forEach(item => {
            item.good_id = this.$route.fullPath.split("?")[1];
            this.incart = true;
          });
          this.cartnum = p.data.data.length;
        } else {
          console.log(p.data);
        }
      } catch (error) {
        console.log(error);
      }
    },
    //添加购物车请求
    async addcart() {
      let user = getUser();
      user = JSON.parse(user);
      // let user= JSON.parse(user)
      console.log(user);
      console.log(user.userphone, this.value, this.good.good_id);
      try {
        let p = await goodApi.addcart(
          user.userphone,
          this.value,
          this.good.good_id
        );
        if (p.data.flag) {
          //添加成功
          this.$toast.success({
            message: "添加购物车成功",
            duration: 1000
          });

          if (!this.incart) {
            this.cartnum++;
          }
        } else {
          //添加失败
          console.log(p.data);
          this.$toast.fail({
            message: "添加购物车失败",
            duration: 1000
          });
        }
      } catch (error) {
        //添加失败弹窗
        console.log(error);
        this.$toast.fail("添加购物车失败");
      }
    },
    //添加购物车按钮
    add() {
      if (this.loginstatus.flag) {
        this.addcart();
      } else {
        if (this.loginstatus.code == 301) {
          this.$toast.fail({
            message: "请登录",
            duration: 1000
          });
          setTimeout(() => {
            this.$router.push("/LRcom/login");
          }, 1000);
        } else {
          this.$toast.fail({
            message: "服务器异常",
            duration: 1000
          });
        }
      }
    },
    //返回首页
    onClickhome() {
      this.$router.push("/");
    },
    // 进入购物车
    onClickcart() {
      if (this.loginstatus.flag) {
        this.$router.push("/cart");
      } else {
        if (this.loginstatus.code == 301) {
          this.$toast.fail("请登录");
          setTimeout(() => {
            this.$router.push("/LRcom/login");
          }, 1000);
        } else {
          this.$toast.fail("服务器异常");
        }
      }
    },
    onChange(index) {
      this.current = index;
    },

    gettime() {
      let date = new Date();
      let month = date.getMonth() + 1;
      let day = date.getDate() + 3;
      if (day > 30) {
        day = day % 30;
        month++;
      }
      this.date = month + "月" + day + "日";
    },

    async getgood() {
      try {
        let p = await goodApi.good(this.$route.fullPath.split("?")[1]);

        this.good = p.data.data[0];
        this.good.src = this.good.src.replace("[", "");
        this.good.src = this.good.src.replace("]", "");
        this.good.src = this.good.src.split(",");
        this.good.xqimg = this.good.xqimg.replace("[", "");
        this.good.xqimg = this.good.xqimg.replace("]", "");
        this.good.xqimg = this.good.xqimg.split(",");
      } catch (error) {}
    },
    // 打开分享
    openshare() {
      this.showShare = true;
    }
  },
  created() {
    this.checktoken();

    this.checkcart();
    this.getgood();
    this.gettime();
  }
};
</script>

<style scoped>
.icon {
  width: 0.2465rem;
  height: 0.2465rem;
  position: absolute;
  top: 0.0855rem;
  left: 0.0855rem;
}
.title {
  background: #fff;
  padding-top: 0.0855rem;
  width: 100%;
  height: 1.2137rem;
}
.goodname {
  height: 0.1709rem;
  line-height: 0.1709rem;
  font-size: 0.1168rem;
  padding: 0 0.1167rem;
  text-align: left;
}
.message {
  height: 0.2308rem;
  line-height: 0.2308rem;
  font-size: 0.1026rem;
  text-align: left;
  color: #808080;
  padding: 0.055rem 0.1167rem 0;
}
.pricebox {
  height: 0.3675rem;
  padding: 0.1rem 0.1167rem;
  border-bottom: 0.0043rem solid #dddddd;
}
.price {
  font-size: 0.1453rem;
  color: #eb3939;
  float: left;
}
.befrom {
  font-size: 0.1453rem;
  color: #999999;
  float: right;
}
.plaint {
  height: 0.4274rem;
  line-height: 0.4274rem;
  font-size: 0.1026rem;
  text-align: left;
  padding-left: 0.1167rem;
}
.van-goods-action {
  height: 0.4274rem;
}
.van-button {
  border-radius: 0;
}
.norms {
  font-size: 0.1026rem;
}
.sizebox {
  width: 100%;
  height: 0.5103rem;
  margin-top: 0.08rem;
  padding: 0 0.167rem 0.1rem;
  text-align: left;
  border-bottom: 0.0043rem solid #dddddd;

  line-height: 0.4103rem;
}
.sizebox span {
  color: #999999;
}
.good_size {
  margin-left: 0.0855rem;
  text-align: center;
  line-height: 0.279rem;
  border-radius: 0.118rem;
  display: inline-block;
  width: 0.628rem;
  height: 0.279rem;
  border: 0.0043rem solid #01b27a;
  color: #01b27a;
}
.numbox {
  width: 100%;
  height: 0.5103rem;
  margin-top: 0.15rem;
  padding: 0 0.167rem 0.1rem;
  text-align: left;
  border-bottom: 0.0043rem solid #dddddd;
}
.numbox span {
  margin-right: 10px;
}
.van-stepper {
  display: inline-block;
}

.van-stepper input {
  float: left !important;
}
.datebox {
  width: 100%;
  height: 0.5103rem;
  margin-top: 0.08rem;
  padding: 0 0.167rem 0.1rem;
  text-align: left;
  border-bottom: 0.0043rem solid #dddddd;

  line-height: 0.4103rem;
  font-size: 0.1026rem;
}
.datebox .span1 {
  padding-left: 0.1709rem;
  padding-right: 0.0427rem;
  color: #01b27a;
}
.xqbox {
  width: 100%;
  height: 0.5103rem;
  margin-top: 0.08rem;

  padding: 0 0.167rem 0.1rem;
  border-bottom: 0.0043rem solid #dddddd;
  text-align: center;
  line-height: 0.4103rem;
  font-size: 0.1026rem;
}
.xqbox p {
  padding-top: 0.0855rem;
}
.xqbox a {
  margin: 0 auto;

  display: block;
  width: 1.0256rem;
  line-height: 0.2222rem;
  height: 0.2222rem;
  border: 0.0085rem solid #dddddd;
  border-radius: 0.0256rem;
}
.share {
  position: absolute;
  font-size: 24px;
  top: 0.14rem;
  right: 0.12rem;
}
</style>